<template>
  <div class="doing-exercises-wrapper">
    <LoadingNodata :loading="loading" :data="list" empty-text="暂无词汇数据">
      <div v-for="(item, index) in list" :key="index" class="doingExerciesContainer">
        <div class="header">
          <div class="name">{{ item?.title || 'answer' }}</div>
          <div class="joinPeople">{{ item?.num || 'X' }}人加入了该词汇</div>
          <div class="aboutQuestion" @click="handleExercis(item)">相关试题</div>
        </div>
        <div class="lang">
          <!-- <div v-for="(meaning, idx) in item?.meanings || dummyMeanings" :key="idx">{{ meaning }}</div> -->
           <div>{{ item.content }}</div>
        </div>
      </div>
    </LoadingNodata>
  </div>
</template>
<script setup>
import { onMounted, ref, unref, watch } from "vue";
import { clientWordsList } from "@/service/personalCenter";
import LoadingNodata from "@/components/LoadingNodata";

const props = defineProps({
  page: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  }
});

const list = ref([]);
const type = ref(1);
const loading = ref(false);
const totalItems = ref(0);
const dummyMeanings = ["[名词]n .爱;爱情;热爱;喜爱;恋爱；", "[名词]n .爱;爱情;热爱;喜爱;恋爱；", "[名词]n .爱;爱情;热爱;喜爱;恋爱；", "[名词]n .爱;爱情;热爱;喜爱;恋爱；"];

const emits = defineEmits(["change", "update-total"]);

const fetchData = async () => {
  loading.value = true;
  try {
    const resp = await clientWordsList({
      page: props.page,
      rows: props.pageSize,
      type: unref(type),
    });
    console.log("resp :>> ", resp);
    if (resp?.code === '000000') {
      list.value = resp.data?.result || [];
      totalItems.value = resp.data?.totalCount || 0;
      emits("update-total", totalItems.value);
    }
  } catch (error) {
    list.value = [];
  } finally {
    loading.value = false;
  }
};

const handleExercis = (id) => {
  console.log("handleExercis");
  emits("change", id);
};

// Watch for changes in page or pageSize
watch(() => [props.page, props.pageSize], () => {
  fetchData();
}, { immediate: false });

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="scss">
.doing-exercises-wrapper {
  width: 100%;
}

.doingExerciesContainer {
  border-bottom: 1px solid #f4f4f4;
  margin: 15px 10px;
  padding: 5px;
  .header {
    display: flex;
    align-items: center;

    .name {
      font-size: var(--default13px);
    }
    .joinPeople {
      color: grey;
      margin: 0 10px 0 10px;
      font-size: var(--default13px);
    }
    .aboutQuestion {
      text-decoration: underline;
      color: var(--main-color);
      font-size: var(--default13px);
      cursor: pointer;
    }
  }
  .lang {
    font-size: var(--default13px);
    margin: 3px;
    color: var(--otherFontColor);
  }
}
</style>
